<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('班级课程设定')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <form class="form-horizontal m">
                <div class="form-group bg-white">

                    <div class="col-sm-12">
                        <label class="font-bold" th:text="${configVo.name + '('+ configVo.gradeName}+')'"></label>
                    </div>
                </div>
            </form>

            <div class="row">
                <div class="col-sm-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li th:each="w:${weekList}" th:class="${wStat.index}==0? 'active':''">
                                <a data-toggle="tab" th:href="'#week'+${wStat.index+1}" th:aria-expanded="${wStat.index}==0" th:onclick="'weekClick('+${wStat.index+1}+')'">
                                    [[${w}]]
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="tab-content">
                        <div th:each="w:${weekList}" th:id="'week'+${wStat.index+1}" class="tab-pane" th:classappend="${wStat.index==0?'active':''}">
                            <div class="panel-body ">
                                <div class="col-sm-12 select-table table-striped">
                                    <table th:id="'week-table'+${wStat.index+1}"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">课程和教师设置</div>
                        <div class="modal-body p-sm">
                            <form class="form-horizontal m" id="add-course-info">
                                <input name="mainId" type="text" id="mainId" th:value="${configVo.id}" class="hidden">
                                <input id="weekId" name="weekId" class="hidden" type="text"/>
                                <input id="clazzId" name="clazzId" class="hidden" type="text"/>
                                <input id="section" name="section" class="hidden" type="text"/>
                                <div th:each="i:${#numbers.sequence(1, configVo.weeks)}"  class="alert" th:classappend="${i}%2==0?'alert-warning':'alert-info'">
                                    <span th:text="'第'+${i}+'周课程:'"></span>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">学科：</label>
                                        <div class="col-sm-4">
                                            <select class='form-control selectpicker' name="semesterId" th:id="semesterId+${i}" th:with="type=${@dict.getType('sc_subject_type')}" th:onchange="semesterId1Change(this,[[${i}]])">
                                                <option value="">请选择学科</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 control-label">教师：</label>
                                        <div class="col-sm-4">
                                            <select class='form-control selectpicker' name="teacherId" th:id="teacherId+${i}" th:with="type=${@teacher.getTeacherList()}" th:onchange="teacherId1Change(this,[[${i}]])">
                                                <option value="">请选择教师</option>
                                                <option th:each="teacher : ${type}" th:text="${teacher.userName}" th:value="${teacher.userId}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="setCourseOK()">确定</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "school/courseConfig";
        var courseDatas = [[${@dict.getType('sc_subject_type')}]];
        var clazzList = [[${clazzList}]]
        var configMain = [[${configVo}]]
        var weeksDatas = [[${weeksDatas}]]
        console.log(weeksDatas);
        var columns = [{ field: 'section', title: '节次'}]
        var currWeek = 1;
        var currRow = {};
        for (let i=0;i<clazzList.length;i++){
            let clazz = clazzList[i]
            let grade = {field:'g'+clazz.id,title:clazz.className}
            columns.push(grade);
        }
        var data = [];
        for(let i=0;i<configMain.sections;i++){
            data.push({section:(i+1)});
        }
        var tableOpt0 = {
            columns: columns,
            data:data
        };

        $(function () {
            initTable(1,weeksDatas);
        });

        function weekClick(wId){
            currWeek = wId;
            $.modal.loading("数据加载中，请稍后...");
            $.ajax({
                type: "get",
                url:prefix+"/getWeeksCourseData/"+configMain.id+"/"+wId,
                async:true,
                dataType: "json",
                success:function (res) {
                    initTable(wId,res);
                    $.modal.closeLoading();
                }
            });

        }

        //单元个点击事件
        function onClickCell(field, value, row, $element){
            if(field === 'section'){
                return ;
            }
            currRow = row;
            $('#section').val(currRow.section);
            if(value){
                for(let i=1;i<=configMain.weeks;i++){
                    let r0 = findItemByWid(i,value);
                    if(r0 != null){
                        if(r0.cId !== undefined){
                            $('#semesterId'+i).val(r0.cId);
                        }
                        if(r0.tId !== undefined){
                            $('#teacherId'+i).val(r0.tId);
                        }
                    }
                }
            }
            $('#weekId').val(currWeek);
            $('#clazzId').val(field.substr(1));
            $('#modal').modal("show");
        }

        function findItemByWid(wId,values) {
            var titem = null;
            if(values.length>0){
                for(var i=0;i<values.length;i++){
                    var item = values[i];
                    if(item.wId == wId){
                        titem = item;
                        break;
                    }
                }
            }
            return titem;

        }

        function setCourseOK(){
            var id = $('#weekId').val();
            var fld = $('#clazzId').val();
            fld = 'g'+fld;
            var tbId = '#week-table'+id;
            var allTableData = $(tbId).bootstrapTable('getData');
            let tmpIndex = -1;
            for(let i = 0;i<allTableData.length;i++){
                let row = allTableData[i];
                if(currRow.section === row.section){
                    tmpIndex = i;
                    break;
                }
            }
            currRow[fld] = [];
            var data = $('#add-course-info').serializeJSON();
            for(let i=1;i<=configMain.weeks;i++){
                let course1 =  getCourseInfo(i);
                data["list["+(i-1)+"].cId"] = course1.cId
                data["list["+(i-1)+"].tId"] = course1.tId
                data["list["+(i-1)+"].wId"] = course1.wId
                currRow[fld].push(course1);
            }
            currRow.weekId = id;
            allTableData[tmpIndex] = currRow;
            $.ajax({
                type: "post",
                url:prefix+'/saveCourse',
                async:false,
                dataType: "json",
                data:data,
                success:function (res) {
                    console.log(res);//保存成功
                    if(res.code==0){
                        $(tbId).bootstrapTable('updateRow', {index: tmpIndex, row: currRow});
                        $('#modal').modal("hide");
                    }else{
                        $.modal.alertWarning(res.msg);
                    }
                }

            });
        }

        function getCourseInfo(id){
            let course = {cId:'',cName:'',tId:'',tName:'',wId:id}
            let cId = $('#semesterId'+id).val();
            let tId = $('#teacherId'+id).val();
            course.cId = cId;
            course.tId = tId;
            var cobj = $('#semesterId'+id);
            var index = cobj[0].selectedIndex;
            var cName = cobj[0].options[index].innerHTML;
            course.cName = cName;
            var tobj = $('#teacherId'+id);
            var index1 = tobj[0].selectedIndex;
            var tName = tobj[0].options[index1].innerHTML;
            course.tName = tName
            return course;
        }


        function initTable(wId,data){
            let tableOpt1 = JSON.parse(JSON.stringify(tableOpt0));
            console.log(tableOpt1)
            tableOpt1 = makeCellFormatterOpt(tableOpt1);
            tableOpt1.data = data['w'+wId];
            $("#week-table"+wId).bootstrapTable(tableOpt1);
        }


        function makeCellFormatterOpt(opt) {
            opt.onClickCell = onClickCell;
            for(let i=0;i<opt.columns.length;i++){
                let col = opt.columns[i];
                if(col.field.indexOf('g')>-1){
                    col.formatter = cellFormatter
                }
            }
            return opt;
        }

        function cellFormatter(value, row, index){
            if(value){
                var names = '';
                for(let i=1;i<=configMain.weeks;i++){
                    let r0 = findItemByWid(i,value);
                    if(r0!=null){
                        names+= (r0.cName||'-')+'/';
                    }else{
                        names+= ('-')+'/';
                    }
                }
                // for(let i=0;i<value.length;i++){
                //     names+= (value[i].cName||'')+'/';
                // }
                names = names.substr(0,names.length-1);
                return names;
            }
            return ''
        }


        function semesterId1Change(obj,index) {
            for(let i=index+1;i<=configMain.weeks;i++){
                var keyId = '#semesterId'+i
                var vv = $(keyId);
                $(keyId)[0].selectedIndex = obj.selectedIndex;
            }

        }

        function teacherId1Change(obj,index) {
            for(let i=index+1;i<=configMain.weeks;i++){
                var keyId = '#teacherId'+i
                var vv = $(keyId);
                $(keyId)[0].selectedIndex = obj.selectedIndex;
            }
        }

    </script>
</body>
</html>